<template>
	<view class="content uni-flex-column" :style="bgStyle">
		<CustomNavBar class="navbar">
			<template v-slot:left>
				<view class="back uni-flex uni-align-center uni-justify-center" @click="goBack"><uni-icons type="left"
						size="20"></uni-icons></view>
			</template>
		</CustomNavBar>

		<view class="center">
			<view class="uni-flex-column top">
				<view class="uni-flex uni-justify-between">
					<view class="title">{{detail?.info?.name}}</view>
					<view class="uni-flex">
						<view class="icon" @click='collectHandle(titleWithDefault)'>
							<image :src="`${$ImgBaseUrl}detail_collect.png`" v-if="!titleWithDefault.contact"
								mode="widthFix" />
							<image :src="`${$ImgBaseUrl}lookforsb-collect-selected.png`" v-if="titleWithDefault.contact"
								mode="widthFix" />
						</view>
						<view class="icon" @click="shareToggle">
							<image :src="`${$ImgBaseUrl}part_time_share.png`" />
						</view>
						<view class="icon" @click='goReport(detail)'>
							<image :src="`${$ImgBaseUrl}part_time_report.png`" />
						</view>
					</view>
				</view>
				<view class="box2">
					<view v-if="Array.isArray(detail?.info?.labels) && detail.info.labels.length > 0"
						class="labels-container">
						<text v-for="(item, i) in detail.info.labels" :key="i" class="project-jobLabel">
							{{ item }}
						</text>
					</view>
					<view class="" v-else>
						--
					</view>
				</view>
				<view class="box3">
					<text class="text1">¥{{detail?.info?.price}}</text>
					<!-- <text class="text2">元/小时</text> -->
				</view>
				<view class="uni-flex box4">
					<image :src="detail?.userInfo?.avatar" class="photo" />
					<view class="uni-flex-column">
						<view>
							<text class="text1">{{ detail?.userInfo?.nikeName }}</text>
							<image :src="`${$ImgBaseUrl}authentication.png`" mode="widthFix" class="authentication" />
						</view>
						<view>
							<text class="text2">在招</text><text
								class="text3">{{ detail?.userInfo?.jobCount }}</text><text class="text2">个职位</text>
						</view>
					</view>
				</view>
			</view>
			<view class="remind uni-flex uni-align-center">
				<image :src="`${$ImgBaseUrl}job_details_remind.png`" mode="widthFix" />
				<text class="text1">谨防诈骗</text>
			</view>
			<view class="demand">
				<view class="title uni-flex">
					<image :src="`${$ImgBaseUrl}detail_label.png`" mode="widthFix" />
					<text>岗位详情</text>
					<image :src="`${$ImgBaseUrl}detail_label.png`" mode="widthFix" />
				</view>
				<view class="demand_content">{{detail?.info?.content}}</view>
			</view>
			<view class="demand" v-if="detail?.disclaimers&&detail.disclaimers!==null">
				<view class="title uni-flex">
					<image :src="`${$ImgBaseUrl}detail_label.png`" mode="widthFix" />
					<text>免责声明</text>
					<image :src="`${$ImgBaseUrl}detail_label.png`" mode="widthFix" />
				</view>
				<view class="demand_content">{{detail?.disclaimers}}</view>
			</view>
			<view class="demand" v-if="Array.isArray(detail.recommend) && detail.recommend.length > 0">
				<view class="title uni-flex">
					<image :src="`${$ImgBaseUrl}detail_label.png`" mode="widthFix" />
					<text>平台兼职</text>
					<image :src="`${$ImgBaseUrl}detail_label.png`" mode="widthFix" />
				</view>
				<view class="uni-flex-column job-item" v-for="(item, index) in detail?.recommend" :key="index">
					<view class="uni-flex uni-justify-between line1">
						<text class="text1">{{item?.name}}</text>
						<view>
							<text class="text2">¥{{item?.price}}</text>
							<!-- <text class="text3">元/小时</text> -->
						</view>
					</view>
					<view class="uni-flex flex-wrap">
						<text
							v-for="(item, i) in Array.isArray(item.labels) ? item.labels : (item.labels || '').split(',')"
							:key="i" class="project">
							{{ item }}
						</text>
						<view class="sign-up" @click="itemClick(item)">去报名</view>
					</view>

				</view>
			</view>
		</view>

		<view class="footer">
			<view class="btn" @click="signUp">联系雇主</view>
		</view>
		<!-- 分享弹窗 -->
		<SharePopup ref="sharePopup" :shareData="shareData" @close="handleShareClose" />
		<CallDialog :showDialog="showCallDialog" :phoneNumber="phoneNumber" @close="showCallDialog = false">
		</CallDialog>

	</view>
</template>

<script setup>
	import {
		computed,
		ref,
		onMounted
	} from "vue";
	import {
		ImgBaseUrl
	} from "@/utils/domain.js";
	import CustomNavBar from "@/components/custom-navbar/index.vue";
	import CallDialog from '@/components/CallDialog.vue'
	import {
		querypartTimeJobDetail
	} from "@/api/findPartTimeJob.js";
	import {
		PeopleDetailCollect,
		getUserEncryption
	} from '@/api/findPeople.js'
	import SharePopup from '@/components/SharePopup.vue' // 导入分享组件
	import {
		onLoad,
		onShareAppMessage
	} from '@dcloudio/uni-app';
	import {
		useStore
	} from 'vuex';
	const store = useStore();
	const item1 = ["接单快", "质量高", "态度好"];
	const item2 = ["兼职工作", "可长期", "骑手"];
	const showCallDialog = ref(false)
	const phoneNumber = ref(''); // 初始默认号码

	// 分享相关数据
	const sharePopup = ref(null);
	const shareData = ref({
		title: '',
		path: '',
		imageUrl: ''
	});
	const collectId = ref('')
	const bgStyle = computed(() => ({
		backgroundImage: `url(${ImgBaseUrl}detail_bg.png)`,
	}));
	const detail = ref({});
	const goBack = () => {
		uni.navigateBack({
			delta: 1,
		});
	};
	// 打开分享弹窗
	const shareToggle = () => {
		// 设置分享数据
		shareData.value = {
			title: detail.value?.name || '推荐一位优质服务者',
			path: `/pages/tabBars/findPartTimeJob/partTimeDetail?jobId=${detail.value}`,
			imageUrl: detail.value?.imgUrl || `${ImgBaseUrl}banner.png`
		};

		sharePopup.value?.open();
	};
	// 分享弹窗关闭回调
	const handleShareClose = () => {
		console.log('分享弹窗已关闭');
	};
	onShareAppMessage(() => {
		return {
			path: `/pages/tabBars/findPartTimeJob/partTimeDetail?jobId=${detail.value}`, // 注意携带必要参数
			title: detail.value?.name || '推荐一位优质服务者', // 动态标题（优先使用服务者名称）
			imageUrl: detail.value?.imgUrl || `${$ImgBaseUrl}banner.png` // 可选：分享卡片图片
		};
	});
	const JobDetail = async id => {
		const res = await querypartTimeJobDetail(id);
		detail.value = res.data;
	};
	onMounted(() => {
		const pages = getCurrentPages();
		const currentPage = pages[pages.length - 1];
		const query = currentPage.options;
		JobDetail(query.id);
		collectId.value = query.id
	});
	// 去报名
	const signUp = async () => {
		const user_info = uni.getStorageSync('user_info');
		if (user_info) {
			const id = JSON.parse(user_info).id
			if (id === detail.value.userInfo.id) {
				uni.showToast({
					title: '不能联系自己发布的兼职',
					icon: 'none'
				})
			} else {
				showCallDialog.value = true
				try {
					const res = await getUserEncryption(detail.value.userInfo.id);
					console.log('获取加密号码接口返回', res);
					if (res.code === 200) {
						phoneNumber.value = res.data
					}
					// 假设接口返回的加密号码字段是 encryptionPhone，根据实际接口调整

				} catch (err) {
					console.error('获取加密号码失败', err);
				}
			}
		}
	}
	const titleWithDefault = computed(() => ({
		...detail.value.title,
		contact: detail.value.title?.contact ?? false
	}));

	const collectHandle = async (state) => {
		// console.log('state-----', state);
		try {
			const params = {
				collectId: collectId.value,
				collectType: "PART_TIME_JOB",
				isCollect: !state.contact
			};

			const res = await PeopleDetailCollect(params);
			if (res.code === 200) {
				state.contact = !state.contact;
				if (detail.value && detail.value.title) {
					detail.value.title.contact = state.contact;
				}
				uni.showToast({
					title: state.contact ? '收藏成功' : '已取消收藏',
					icon: 'none'
				});
			} else {
				uni.showToast({
					title: res.msg || '操作失败',
					icon: 'none'
				});
			}
		} catch (error) {
			console.error('收藏操作失败:', error);
			uni.showToast({
				title: res.msg || '操作失败，请重试',
				icon: 'none'
			});
		}
	};

	// 跳转到举报中心页面
	const goReport = ((detail) => {
		// console.log('detail',detail);
		const detailStr = encodeURIComponent(JSON.stringify(detail));
		uni.navigateTo({
			url: `/pages/reportCenter/report?item=${detailStr}`,
		});
	})
	// 平台兼职中的去报名按钮
	const itemClick = (item) => {
		uni.navigateTo({
			url: `/pages/tabBars/findPartTimeJob/partTimeDetail?id=${item.id}`
		});
	};
</script>

<style lang="scss" scoped>
	.content {
		position: relative;
		width: 100%;
		height: 100vh;
		box-sizing: border-box;
		// background-image: var(--bg-url);
		// background-size: 100% auto; /* 宽度100%，高度自动 */
		background-repeat: no-repeat;
		background-position: top center;
		/* 关键：图片顶部对齐 */
		overflow: hidden;

		.center {
			width: 100%;
			box-sizing: border-box;
			flex: 1;
			overflow-y: auto;
			padding: 0 24rpx 10rpx;

			// margin-bottom: 100rpx;
			.top {
				background: linear-gradient(194deg,
						rgba(255, 255, 255, 0.6) 0%,
						#ffffff 100%);
				border-top-left-radius: 20px;
				border-top-right-radius: 20px;
				padding: 43rpx 34rpx 37rpx;
				margin-top: 40rpx;

				.title {
					font-weight: 500;
					font-size: 34rpx;
					color: #333333;
				}

				.icon {
					background: #f1f1f1;
					border-radius: 50%;
					width: 40rpx;
					height: 40rpx;
					margin-left: 20rpx;
					display: inline-flex;
					align-items: center;
					justify-content: center;

					image {
						width: 25rpx;
						height: 25rpx;
						display: block;
					}
				}

				.box2 {
					margin-top: 20rpx;

					.labels-container {
						display: flex;
						flex-wrap: wrap;
						/* 允许标签换行 */
					}

					.project-jobLabel {
						background: #F1F1F1;
						border-radius: 4rpx;
						padding: 10rpx 10rpx;
						margin: 10rpx;
						/* 上下左右都有10rpx的间距 */
						font-weight: 500;
						font-size: 24rpx;
						color: #333;

						/* 可选：添加悬停效果 */
						&:active {
							background-color: #e0e0e0;
						}
					}

					.text1 {
						font-weight: 500;
						font-size: 24rpx;
						color: #333333;
						background: #f1f1f1;
						border-radius: 4px;
						padding: 6rpx 10rpx;
						margin-right: 20rpx;
					}

					.text2 {
						font-weight: 500;
						font-size: 24rpx;
						color: #ff6a47;
						background: #ffeae6;
						border-radius: 4px;
						padding: 6rpx 10rpx;
						margin-right: 20rpx;
					}

					.text3 {
						font-weight: 500;
						font-size: 24rpx;
						color: #2f80ed;
						background: #e7f1ff;
						border-radius: 4px;
						padding: 6rpx 10rpx;
						margin-right: 20rpx;
					}
				}

				.box3 {
					margin-top: 20rpx;
					border-bottom: 1px solid #e2e2e2;
					padding-bottom: 16rpx;

					.text1 {
						font-weight: 500;
						font-size: 34rpx;
						color: #ff6a47;
						margin-right: 10rpx;
					}

					.text2 {
						font-weight: 500;
						font-size: 20rpx;
						color: #999999;
					}
				}

				.box4 {
					margin-top: 20rpx;

					.photo {
						width: 68rpx;
						height: 68rpx;
						border-radius: 50%;
						margin-right: 20rpx;
					}

					.authentication {
						width: 24rpx;
						margin-left: 14rpx;
					}

					.text1 {
						font-weight: 500;
						font-size: 30rpx;
						color: #333333;
						margin-bottom: 8rpx;
					}

					.text2 {
						font-size: 24rpx;
						color: #999999;
					}

					.text3 {
						font-size: 24rpx;
						color: #2f80ed;
					}
				}
			}

			.remind {
				background: #fef6e5;
				border-bottom-left-radius: 20px;
				border-bottom-right-radius: 20px;
				margin-bottom: 24rpx;
				padding: 15rpx 0;
				justify-content: center;

				image {
					width: 25rpx;
					height: 30rpx;
				}

				.text1 {
					font-weight: 400;
					font-size: 24rpx;
					color: #feb310;
					margin-left: 20rpx;
				}
			}

			.demand {
				background: white;
				border-radius: 20px;
				padding: 32rpx 34rpx 53rpx;
				margin-bottom: 24rpx;

				.title {
					justify-content: center;
					align-items: center;
					margin-bottom: 6rpx;

					image {
						width: 32rpx;
					}

					text {
						font-weight: 500;
						font-size: 36rpx;
						color: #333333;
						margin: 0 24rpx;
					}
				}

				.job-item {
					background: #f7f7f7;
					border-radius: 20px;
					padding: 31rpx 28rpx 47rpx;
					margin-top: 24rpx;

					.line1 {
						margin-bottom: 27rpx;

						.text1 {
							font-weight: 500;
							font-size: 32rpx;
							color: #333333;
						}

						.text2 {
							font-size: 34rpx;
							color: #ff6a47;
							margin-right: 10rpx;
						}

						.text3 {
							font-size: 20rpx;
							color: #999;
						}
					}

					// 修改标签容器样式
					.flex-wrap {
						flex-wrap: wrap; // 允许换行
						// margin-bottom: 27rpx; // 保持与原来的间距一致

						// 标签样式
						.project {
							// flex: 0 0 calc(33.333% - 20rpx); // 每行3个，减去margin
							margin-right: 20rpx; // 右边距
							margin-bottom: 10rpx; // 下边距，用于换行
							background: #e3e3e3;
							border-radius: 4px;
							padding: 10rpx 10rpx;
							font-weight: 500;
							font-size: 24rpx;
							color: #333333;
							text-align: center;
							box-sizing: border-box;

							// 每行最后一个标签的右边距重置
							&:nth-child(3n) {
								margin-right: 0;
							}
						}
					}

					.sign-up {
						background: #2f80ed;
						border-radius: 34rpx;
						font-weight: 500;
						font-size: 24rpx;
						color: #ffffff;
						padding: 15rpx 34rpx;
						margin-left: auto; // 靠右对齐
					}
				}
			}
		}

		.demand_content {
			font-weight: 400;
			font-size: 28rpx;
			color: #333333;
			line-height: 50rpx;
		}

		.footer {
			width: 100%;
			height: 100rpx;
			background: #ffffff;
			display: flex;
			align-items: center;
			padding: 22rpx 0;

			.btn {
				background: #2f80ed;
				border-radius: 44px;
				height: 88rpx;
				line-height: 88rpx;
				text-align: center;
				flex: 1;
				font-weight: 500;
				font-size: 30rpx;
				color: #ffffff;
				margin: 0 24rpx;
			}
		}
	}
</style>